<script setup>

import {reactive, ref} from "vue";
import {getImage, getProject, getTag} from "./api.js";
import {
  DArrowRight,
  Close,
  Delete
} from '@element-plus/icons-vue'

const input = reactive({
  copyInput: "",
  selectProject: "",
  selectImage: "",
  selectTag: "",
  projectOptions: [],
  imageOptions: [],
  tagOptions: []
})

const downloadImageList = ref([])
const activeTabName = ref("batch")

const autosize = ref({
  minRows: 12
})

const timeFormatter = (value) => {
  return value.indexOf("0001") === -1 && value.replace('T', ' ').substring(0, 19)
}

getProject().then(res => {
  input.projectOptions = res.data.map((item) => {
    return {
      label: item.name,
      value: item.name
    }
  })
})

const restImageOptions = () => {
  input.imageOptions = []
  input.tagOptions = []
  input.selectImage = ""
  input.selectTag = ""
  getImage(input.selectProject).then(res => {
    input.imageOptions = res.data.map((item) => {
      return {
        label: item.name.split("/")[1],
        value: item.name.split("/")[1]
      }
    })
  })
}

const resetTags = () => {
  input.tagOptions = []
  input.selectTag = ""
  getTag(input.selectProject, input.selectImage).then(res => {
    const tagList = ref([])
    if (res.data) {
      for (let i in res.data) {
        const tags = res.data[i].tags
        if (tags) {
          for (let j in tags) {
            tagList.value.push({
              label: tags[j].name + "（" + timeFormatter(tags[j].push_time) + "）",
              value: tags[j].name
            })
          }
        }
      }
      input.tagOptions = tagList.value
    }
  })
}

const addOneDownload = () => {
  downloadImageList.value.push(input.selectProject + "/" + input.selectImage + ":" + input.selectTag)
}

const parseInputImage = () => {
  let tag = input.copyInput.split("\n")
  downloadImageList.value = downloadImageList.value.concat(tag)
}

const handleTabClick = (tab, event) => {
  Object.assign(input,{
    copyInput: "",
    selectProject: "",
    selectImage: "",
    selectTag: "",
    imageOptions: [],
    tagOptions: []
  })
}

const delDownloadImage = (image) => {
  downloadImageList.value.splice(downloadImageList.value.indexOf(image), 1)
}
</script>

<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-tabs type="border-card" v-model="activeTabName" @tab-click="handleTabClick" style="min-height: 60vh">
          <el-form :model="input">
            <el-tab-pane label="批量输入" name="batch">
              <el-input type="textarea" v-model="input.copyInput" :autosize="autosize">

              </el-input>
            </el-tab-pane>
            <el-tab-pane label="选择输入" name="select">
              <el-row>
                <el-col :span="24">
                  <el-form-item prop="selectProject" label="仓库">
                    <el-select v-model="input.selectProject" @change="restImageOptions">
                      <el-option v-for="item in input.projectOptions" :key="item.value" :value="item.value">
                        {{ item.label }}
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="input.imageOptions.length > 0">
                  <el-form-item prop="selectImage" label="镜像">
                    <el-select v-model="input.selectImage" @change="resetTags">
                      <el-option v-for="item in input.imageOptions" :key="item.value" :value="item.value">
                        {{ item.label }}
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="input.tagOptions.length > 0">
                  <el-form-item prop="selectTag" label="Tag">
                    <el-select v-model="input.selectTag">
                      <el-option v-for="item in input.tagOptions" :key="item.value" :value="item.value">
                        {{ item.label }}
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-row v-if="(input.copyInput && input.copyInput.length > 0) || (input.selectTag && input.selectTag.length > 0)">
              <el-col :span="24" style="text-align: right; padding: 10px 0;">
                <el-button v-if="input.copyInput && input.copyInput.length > 0" @click="parseInputImage">解析镜像</el-button>
                <el-button v-if="input.selectTag && input.selectTag.length > 0" @click="addOneDownload">加入下载</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-tabs>
      </el-col>
      <el-col :span="1" style="line-height: 60vh; text-align: center">
        <el-icon :size="32">
          <DArrowRight />
        </el-icon>
      </el-col>
      <el-col :span="8" style="min-height: 60vh;">
        <div style="background-color: #ffffff; min-height: 60vh; color: #000000; text-align: center; padding: 5px;">
          <p v-for="item in downloadImageList" :key="item">
            <el-tag>
              {{ item }}
            </el-tag>
            <span style="padding: 8px 0 0 10px">
              <el-icon :size="16" color="#ff0000" @click="delDownloadImage(item)"><Delete /></el-icon>
            </span>
          </p>
        </div>
      </el-col>
      <el-col :span="1" style="line-height: 60vh; text-align: center">
        <el-icon :size="32">
          <DArrowRight />
        </el-icon>
      </el-col>
      <el-col :span="6" style="line-height: 60vh; text-align: center; background-color: #ffffff; padding: 10px;">
        <el-row>
          <el-form>
            <el-col :span="24">
              <el-form-item label="harbor地址">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-button>批量下载</el-button>
            </el-col>
          </el-form>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>

</style>